<div class="container">
	<!--<ol class="breadcrumb">
		<li><a href="#">人力资源管理系统</a></li>
		<li><a href="#">公司图库</a></li>
		<li>图片展示</li>
	</ol>-->

	<h2 class="page-header">上传课程</h2>

	<form id="form1" class="form-horizontal" enctype="multipart/form-data">
		<div class="form-group">
			<label for="" class="col-sm-2" style="color: white;">选择课程</label>
			<div class="col-sm-8">
				<input type="file" id="soursePath" name="soursePath" placeholder="请选择视频文件" class="form-control" />
			</div>
		</div>
		<div class="form-group">
			<label for="" class="col-sm-2" style="color: white;">选择图片</label>
			<div class="col-sm-8">
				<input type="file" id="sourseImg" name="sourseImg" placeholder="请选择图片文件" class="form-control" />
			</div>
		</div>
		<div class="form-group">
			<label for="" class="col-sm-2" style="color: white;">课程名称</label>
			<div class="col-sm-8">
				<input type="text" id="sourseName" name="sourseName" placeholder="请输入课程名称" class="form-control" />
			</div>
		</div>
		<div class="form-group">
			<label for="" class="col-sm-2" style="color: white;">所属职业</label>
			<div class="col-sm-8">
				<select name="job.jobId" id="jobId" class="form-control">
					<option value="">请选择课程所属职业</option>													
				</select>
			</div>
		</div>
		<div class="form-group">
			<label for="" class="col-sm-2" style="color: white;">课程简介</label>
			<div class="col-sm-8">
				<input type="text" id="sourseIntro" name="sourseIntro" placeholder="请输入课程简介" class="form-control" />
			</div>
		</div>

		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				<input type="button" value="上传" id="addBtn" class="btn btn-success" />
			</div>
		</div>
		<!--进度条-->
		<div class="form-group">
			<div class="progress" id="progress" style="display: none;">
				<div id="son" class="progress-bar progress-bar-success progress-bar-striped active" style="width: 0%;">
					0%
				</div>
			</div>
		</div>
		<!-- 预览图片  -->
		<img src="" id="previewImg" class="img-responsive" />
	</form>
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<script type="text/javascript" src="js/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
<script>
	
	$(function() {
		
		//动态生成职务列表框
		$.ajax({
			url:baseUrl + '/job/query',
			type:'GET',
			dataType:'json'				
		})
		.done(function(data){				
			$.each(data, function(index,item) {					
				var opt = '<option value="' + item.jobId + '">' + item.jobName + '</option>';
				$('#jobId').append(opt);
			});					
		})
		.fail(function(xhr,status,text){
			layer.msg('职务列表请求失败');				
		});
		
		$('#soursePath').change(function(e) {

			var file = this.files[0];
			//					alert(file.type);
			//判断文件是否是图片
//					if (file.type.match(/image/) == null) {
//						//用户选择的不是一个图片文件
//						layer.msg('请选择一个图片文件');
//						//清空文件域的内容
//						this.value = '';
//						return false;
//					}

			//判断图片的大小，图片不允许超过1M
			if (file.size > 2 * 1024 * 1024 * 1024) {
				layer.msg('图片的大小不能超过2G');
				//清空文件域的内容
				this.value = '';
				return false;
			}

			//获得文件读取对象
//			var fr = new FileReader();
			//读取文件内容
//			fr.readAsDataURL(file);

			//异步读取文件内容，读取文件完毕之后 会触发onload
//			fr.onload = function() {
//				console.log(this.result);
				//显示图片
//				$('#previewImg').attr('src', this.result);
//			}
		});
		
		$('#sourseImg').change(function(e) {

					var img = this.files[0];
					//					alert(file.type);
					//判断文件是否是图片
					if (img.type.match(/image/) == null) {
						//用户选择的不是一个图片文件
						layer.msg('请选择一个图片文件');
						//清空文件域的内容
						this.value = '';
						return false;
					}

					//判断图片的大小，图片不允许超过1M
					if (img.size > 1 * 1024 * 1024) {
						layer.msg('图片的大小不能超过1M');
						//清空文件域的内容
						this.value = '';
						return false;
					}

					//获得文件读取对象
					var fr = new FileReader();
					//读取文件内容
					fr.readAsDataURL(img);

					//异步读取文件内容，读取文件完毕之后 会触发onload
					fr.onload = function() {
						console.log(this.result);
						//显示图片
						$('#previewImg').attr('src', this.result);
					}
				});

		/*验证表单函数*/
		function checkForm() {
			var files = $('#soursePath').get(0).files;
			if (files.length == 0) {
				layer.msg('请选择上传的课程视频');
				$('#soursePath').focus();
				return false;
			}
			
			var img = $('#sourseImg').get(0).files;
			if (img.length == 0) {
				layer.msg('请选择上传图片作为的课程视频封面');
				$('#sourseImg').focus();
				return false;
			}
			
			//文件描述验证
			var sourseIntro = $('#sourseIntro');
			if (sourseIntro.val() == '' || sourseIntro.val().length > 2000) {
				layer.msg('图片描述不能够为空 并且最多2000个字符');
				$('#sourseIntro').focus();
				return false;
			}
			return true;
		}
		//上传按钮的单击事件
		$('#addBtn').click(function() {

			if (!checkForm()) {
				return;
			}
			//显示上传的进度条
			$('#progress').show();
			//发送ajax请求
			//文件对象
			var file = $('#soursePath').get(0).files[0];
			var img = $('#sourseImg').get(0).files[0];
			// 创建FormData对象（表单数据）
			var formData = new FormData();

			// 添加数据字段到FormData
			formData.append('soursePath', file);
			// 添加数据字段到FormData
			formData.append('sourseImg', img);
			// 添加数据字段到FormData
			formData.append('sourseName', $('#sourseName').val());
			// 添加数据字段到FormData
			formData.append('jobId', $('#jobId').val());
			// 添加数据字段到FormData
			formData.append('sourseIntro', $('#sourseIntro').val());

			//异步请求
			$.ajax({
					url: baseUrl + '/sourse/add',
					type: 'POST',
					data: formData,
					processData: false, //一定设置false
					contentType: false, //一定设置false
					//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
					　　　xhr: function() {　　　　　　
						var xhr = $.ajaxSettings.xhr();

						　　　　　　
						if (onprogress && xhr.upload) {　　　　　　　　
							xhr.upload.addEventListener("progress", onprogress, false);　　　　　　　　
							return xhr;　　　　　　
						}　　　
					}
				})
				.done(function(data) {
					layer.msg("上传课程成功！");
					
					setTimeout(function(){
						window.parent.location.reload();//刷新父窗口
						window.parent.layer.closeAll();
					},500);
				})
				.fail(function(xhr) {
					layer.msg("请求失败，" + xhr.status);
				});

			/**
			 * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
			 */
			function onprogress(evt) {
				var loaded = evt.loaded; //已经上传大小情况 
				var tot = evt.total; //附件总大小 
				var per = Math.floor(100 * loaded / tot); //已经上传的百分比 
				$("#son").html(per + "%");
				$("#son").css("width", per + "%");
			}

		});
	});
</script>
